import Option from './TagSelectOption.jsx'
import { filterEmpty } from '@/components/_util/util'

export default {
  Option,
  name: 'TagSelect',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-tag-select'
    },
    defaultValue: {
      type: Array,
      default: null // e.g. items = [value1, value2, value3], defaultValue = [value1, value2]
    },
    value: {
      type: Array,
      default: null // e.g. items = [value1, value2, value3], defaultValue = [value1, value2]
    },
    expandable: {
      type: Boolean,
      default: false
    },
    hideCheckAll: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      expand: false,
      localCheckAll: false,
      items: this.getItemsKey(filterEmpty(this.$slots.default)) // e.g. { value1: checked1 }， 通过改变 items 可触发子项更新
    }
  },
  watch: {
    value: {
      handler (nV) { // value 改变，判断是否需要更新 items
        const items = this.items

        for (const key in items) {
          if (items[key] !== nV.includes(key)) items[key] = nV.includes(key)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onChange (checkedValue) {
      const value = this.value
      const items = this.items

      const index = value.indexOf(checkedValue)
      if (index > -1) value.splice(index, 1)
      else value.push(checkedValue)

      if (!this.hideCheckAll) {
        const bool = Object.values(items).lastIndexOf(false)
        if (bool === -1) {
          this.localCheckAll = true
        } else {
          this.localCheckAll = false
        }
      }
    },
    onCheckAll (checked) {
      Object.keys(this.items).forEach(v => {
        this.items[v] = checked.checked
      })
      this.localCheckAll = checked.checked
    },
    getItemsKey (items) {
      const totalItem = {}
      items.forEach(item => {
        totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
      })
      return totalItem
    },
    // CheckAll Button
    renderCheckAll () {
      return (!this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>)) || null
    },
    // expandable
    renderExpandable () {

    },
    // render option
    renderTags (items) {
      const value = this.value
      const defaultVal = value || this.defaultValue

      const listeners = {
        change: (checked) => {
          this.onChange(checked.value)
          this.$emit('change', { checked, value })
        }
      }

      return items.map(vnode => {
        const options = vnode.componentOptions
        options.listeners = listeners

        // 设置默认值
        if (defaultVal && defaultVal.length && options.propsData) options.propsData.checked = defaultVal.includes(options.propsData.value)
        return vnode
      })
    }
  },
  render () {
    const { $props: { prefixCls }} = this
    const classString = {
      [`${prefixCls}`]: true
    }
    const tagItems = filterEmpty(this.$slots.default)
    return (
      <div class={classString}>
        {this.renderCheckAll()}
        {this.renderTags(tagItems)}
      </div>
    )
  }
}
